<template>
	<view class="apps">
		<view class="banner">
			<image :src="banner" mode="widthFix"></image>
		</view>
	
		<view class="list">
			<view class="listItem">
				<view class="itemTop">
					<view class="tags">
						精华
					</view>
					我们常见的四种字体分别是草书，行书，楷书和隶书，草书、行书、楷书、隶书四种字体当中哪一种是其余三种字体的起源字体
				</view>
				<uv-line></uv-line>
				<view class="itemInfo">
					<view class="flex">
						<uv-avatar text="佚" shape="circle" size="20" bg-color="#e1e1e1" color="#660874" font-size="26rpx" ></uv-avatar>
						<text style="margin-left: 8rpx;">佚名</text>
					</view>
					<view class="flex">2025-10-14 14:36</view>
					<view class="flex">
						<uv-icon name="eye-fill" color="#660874"></uv-icon>
					</view>
				</view>
				<view class="itemImage">
					<image :src="banner" mode="widthFix"></image>
				</view>
				<uv-gap height="5" bgColor="#660874"></uv-gap>
				<view class="itembottom">
					<view class="tags">
						<view  class="tagslist">
							<view class="tagsLeft">
								<uv-icon name="chat" color="#fff"></uv-icon>
							</view>
							<view class="tagsRight"><text>回答</text></view>
						</view>
					</view>
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
				</view>
			</view>
			<view class="listItem">
				<view class="itemTop">
					<view class="tags">
						精华
					</view>
					我们常见的四种字体分别是草书，行书，楷书和隶书，草书、行书、楷书、隶书四种字体当中哪一种是其余三种字体的起源字体
				</view>
				<uv-line></uv-line>
				<view class="itemInfo">
					<view class="flex">
						<uv-avatar text="佚" shape="circle" size="20" bg-color="#e1e1e1" color="#660874" font-size="26rpx" ></uv-avatar>
						<text style="margin-left: 8rpx;">佚名</text>
					</view>
					<view class="flex">2025-10-14 14:36</view>
					<view class="flex">
						<uv-icon name="eye-fill" color="#660874"></uv-icon>
					</view>
				</view>
				<uv-gap height="5" bgColor="#660874"></uv-gap>
				<view class="itembottom">
					<view class="tags">
						<view  class="tagslist">
							<view class="tagsLeft">
								<uv-icon name="chat" color="#fff"></uv-icon>
							</view>
							<view class="tagsRight"><text>回答</text></view>
						</view>
					</view>
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
				</view>
			</view>
			<view class="listItem">
				<view class="itemTop">
					我们常见的四种字体分别是草书，行书，楷书和隶书，草书、行书、楷书、隶书四种字体当中哪一种是其余三种字体的起源字体
				</view>
				<uv-line></uv-line>
				<view class="itemInfo">
					<view class="flex">
						<uv-avatar text="佚" shape="circle" size="20" bg-color="#e1e1e1" color="#660874" font-size="26rpx" ></uv-avatar>
						<text style="margin-left: 8rpx;">佚名</text>
					</view>
					<view class="flex">2025-10-14 14:36</view>
					<view class="flex">
						<uv-icon name="eye-fill" color="#660874" size="20"></uv-icon>
					</view>
				</view>
				<uv-gap height="5" bgColor="#660874"></uv-gap>
				<view class="itembottom">
					<view class="tags">
						<view  class="tagslist">
							<view class="tagsLeft">
								<uv-icon name="chat" color="#fff"></uv-icon>
							</view>
							<view class="tagsRight"><text>回答</text></view>
						</view>
					</view>
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
					我们常见的四种字体分别是草书，行书，楷书和历史，其中楷书是由隶书逐渐演变而来的，行书也是在隶书的基础上慢慢发展起源的，当然，草书为了书写方便，也是由隶书“-IDLL》下一条变而来的。所以在这四种字书是其余三种的起源字体。
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { util } from '@/common/util.js'
	import { ref , reactive, nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const banner = ref(""), list = ref([]),more=ref(true),page=ref(1)
	banner.value = util.config.url+'/images/banner.jpg'
	onLoad(()=>{
		
	})
</script>

<style lang="scss" scoped>
	.flex{display: flex;font-size: 24rpx;align-items: center;}
	.banner{width:750rpx;height: 300rpx;
		image{width:100%;height: 100%;}
	}
	.list{display: flex; flex-direction: column;
		.listItem{display:flex;flex-direction: column;margin-bottom: 20rpx; padding:10rpx 15rpx;background-color: #fff;
			.itemTop{ margin-bottom: 15rpx; color:#660874;font-weight: 400; display: -webkit-box;-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /* 显示两行 */overflow: hidden;text-overflow: ellipsis;font-size: 30rpx;line-height: 40rpx;
				.tags{display: inline-block; margin-right: 8rpx; padding:4rpx 12rpx;background-color: #660874; color:#fff;font-size: 22rpx;font-weight: 400;border-radius: 10rpx;}
			}
			.itemInfo{padding:15rpx 0;display: flex; align-items: center; justify-content: space-between;font-size: 24rpx;}
			.itemImage{height:270rpx;overflow: hidden;
				image{width: 100%;}
			}
			.itembottom{margin: 15rpx 0; color:#444;font-weight: 400; display: -webkit-box;-webkit-box-orient: vertical;
			-webkit-line-clamp: 3; /* 显示两行 */overflow: hidden;text-overflow: ellipsis;font-size: 30rpx;line-height: 40rpx;
					.tags{display: inline-block; margin-right: 8rpx; background-color: #660874; color:#fff;font-size: 22rpx;font-weight: 400;border-radius: 30rpx 0 30rpx 0;
						.tagslist{display: flex; width:120rpx; align-items: center; 
							.tagsLeft{width:50rpx;display: flex;justify-content: center; border-right: 1px solid #fff;}
							.tagsRight{flex:1;display: flex; justify-content: center;font-size: 22rpx;}
						}
					}
			}
		}
	}
	
</style>
